<template>
  <div>
    <span slot="header">商品统计</span>
    <el-form class="df aic">
      <!-- 时间日期选择器 -->
      <el-form-item label="选择时间" class="demonstration">
        <el-date-picker size="mini" v-model="date"
          value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <!-- 思路1 有数据才显示 v-if 解决异步问题 -->
      <!-- <chart-bar v-if="Object.keys(chartData).length" :chart-data='chartData'>
    </chart-bar> -->

      <!-- 思路2 子组件监听数据变化才渲染 -->
      <chart-bar :chart-data="chartData">
      </chart-bar>
    </el-card>
  </div>
</template>

<script>
import { formatYMDhms } from "@/filters";
import { orderTotalReq } from "@/api/total";
import ChartBar from "./ChartBar.vue";
export default {
  components: {
    ChartBar,
  },
  data() {
    return {
      date: [],
      chartData: {},
    };
  },
  methods: {
    async getData() {
      // console.log("this.date :>> ", this.date);
      let res = await orderTotalReq({
        date: JSON.stringify(this.date),
      });
      // console.log("res :>> ", res);
      //解构数据
      let { data } = res.data;
      //处理数据
      let xData = data.map((v) => formatYMDhms(v.orderTime));
      // console.log("xData :>> ", xData);
      let series = [
        {
          type: "bar",
          name: "金额数据",
          // barWidth:'20%',
          barMaxWidth: "30%",
          data: data.map((v) => v.orderAmount),
        },
      ];

      //封装echart步骤：数据赋值
      this.chartData = { xData, series };
      console.log(" this.chartData :>> ", this.chartData);

      // //画图
      // this.renderLine({
      //   xData,
      //   series,
      //   title: "金额图表",
      // });
    },

    //查询---双向数据绑定
    search() {
      // console.log('999 :>> ', 999);
      this.searchForm = this.date;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 520px;
}
.myChart {
  height: 300px;
  background: white;
}
.el-card_body {
  background: #f0f2f5;
}
</style>
